<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>flati | responsive html5 template | themeforest | josweb</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<link href='http://fonts.googleapis.com/css?family=Lato:400,700,300' rel='stylesheet' type='text/css'>
<!--[if IE]>
	<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Lato:400" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Lato:700" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet" type="text/css">
<![endif]-->

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/theme.css" rel="stylesheet">
<link href="css/colour.css" rel="stylesheet" type="text/css"/>
<link href="css/docs.css" rel="stylesheet" type="text/css"/>

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>
<!--header-->
	<div class="header">
<!--menu-->
    <nav id="main_menu" class="navbar" role="navigation">
      <div class="container">
            <div class="navbar-header">
        <!--toggle-->
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
				<i class="fa fa-bars"></i>
			</button>
		<!--logo-->
			<div class="logo">
				<a href="index.html"><img src="img/logo.png" alt="" class="animated bounceInDown" /></a> 
			</div>
		</div>
           
            <div class="collapse navbar-collapse" id="menu">
                <ul class="nav navbar-nav pull-right">
                   			<li class="dropdown"><a href="javascript:{}">Home</a> 
							<ul class="dropdown-menu">
							<li><a href="index.html">Slider Revolution</a></li>
							<li><a href="index2.html">Nerve Slider</a></li>
							<li><a href="index3.html">NivoSlider</a></li>
							<li><a href="index4.html">Slides</a></li>
							<li><a href="index5.html">Html5 Video</a></li>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Pages</a>
						<ul class="dropdown-menu">
								<li><a href="team.html">The Team</a></li>
								<li><a href="about.html">About</a></li>
								<li><a href="services.html">Services</a></li>
								<li><a href="testimonials.html">Testimonials</a></li>
								<li><a href="timeline.html">Timeline</a></li>
								<li><a href="full.html">Full Width</a></li>
								<li><a href="left_sidebar.html">Left Sidebar</a></li>
								<li><a href="right_sidebar.html">Right Sidebar</a></li>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Work</a>
						<ul class="dropdown-menu">
								<li><a href="portfolio_2columns.html">2 Columns</a></li>
								<li><a href="portfolio_3columns.html">3 Columns</a></li>
								<li><a href="portfolio_4columns.html">4 Columns</a></li>
								<li><a href="portfolio_masonry.html">Masonry</a></li>
								<li><a href="gallery.html">Paginated Gallery</a></li>
								<li><a href="video_gallery.html">Video Gallery</a></li>
								<li><a href="single_portfolio.html">Single Slider</a></li>
								<li><a href="single_video.html">Single Video</a></li>
								<li><a href="single_image.html">Single Image</a></li>
								<li><a href="full_slider.html">Full Slider</a></li>
								<li><a href="full_video.html">Full Video</a></li>
						</ul>
							</li>
							<li class="dropdown active"><a href="javascript:{}">Style</a>
						<ul class="dropdown-menu">
								<li><a href="scaffolding.html">Scaffolding</a></li>
								<li><a href="shortcodes.html">Shortcodes</a></li>
								<li><a href="icons.html">Icons</a></li>
								<li><a href="script_examples.html">JS Examples</a></li>
								<li><a href="javascript:{}">Sub Menu</a>
							<ul class="dropdown-menu sub-menu">
								<li><a href="#">Sub One</a></li>
								<li><a href="#">Sub Two</a></li>
								<li><a href="#">Sub Three</a></li>
								<li><a href="#">Sub Four</a></li>
							</ul>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Extras</a>
						<ul class="dropdown-menu">
								<li><a href="dribbble_stream.html">Dribbble Stream</a></li>
								<li><a href="alt_footer.html">Alt. Footer & Boxes</a></li>
								<li><a href="pricing_table.html">Pricing Table</a></li>
								<li><a href="404.html">404 Page</a></li>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Blog</a>
						<ul class="dropdown-menu">
								<li><a href="blog.html">Blog</a></li>
								<li><a href="blog_two.html">Blog II</a></li>
								<li><a href="blog_post.html">Blog Post</a></li>
								<li><a href="blog_post2.html">Blog Post II</a></li>
						</ul>
							</li>
							<li><a href="contact.html">Contact</a></li>
						</ul>
					</div>
				</div>
			</nav>
		</div>
	<!--//header-->
	
	<!--page-->    
    <div id="banner">
		<div class="container intro_wrapper">
			<div class="inner_content">
				<h1>Style</h1>
					<h1 class="title">Javascript Examples</h1>
						<h1 class="intro">
							Bring Bootstrap's <span class="hue">components</span> to life, with custom jQuery plugins.
						</h1>
					</div>
				</div>
			</div>
		<div class="container wrapper pad30">
			<div class="inner_content">
		<div class="row">
			<div class="col-md-6">
	
<!-- Tabs ================================================== -->
		  
		<h2>Tabs</h2>
		
		<ul id="myTab" class="nav nav-tabs">
        	<li class="active"><a href="#one" data-toggle="tab">One</a></li>
        	<li><a href="#three" data-toggle="tab">Two</a></li>
			<li><a href="#three" data-toggle="tab">Three</a></li>
         </ul>
      	
		<div id="myTabContent" class="tab-content">
        <div class="tab-pane fade in active" id="one">
          <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan 
			four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts. </p>
        </div>

        <div class="tab-pane fade" id="two">
          <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan 
			four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts. </p>
        </div>

         <div class="tab-pane fade" id="three">
          <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan 
			four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts.</p>
        </div>
	</div>
	
<!-- Tooltips ================================================== -->
        
         <h2>Tooltips</h2>
      
          <div class="bs-docs-example tooltip-demo">
            <a href="#" data-rel="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</a> :
              <a href="#" data-rel="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</a> :
              <a href="#" data-rel="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a> :
              <a href="#" data-rel="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</a>
          </div>
			
<!-- Modal Box ================================================== -->
	
	<h2>Modal box</h2>
	
	<p>Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.</p>
  <!-- sample modal content -->
  <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">

        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="myModalLabel">Modal Heading</h4>
        </div>
        
		<div class="modal-body">
          <h3>Text in a modal</h3>
         <p>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud 
			exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore 
			eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum 
			soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
		</p> 
		 <p>	
			Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum 
			claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. 
			Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc 
			nobis videntur parum clari, fiant sollemnes in futurum.
		</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
        </div>
	 </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
	
	<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
      Launch demo modal
    </button>

<!-- Popovers ================================================== -->
     
       <h2>Popovers</h2>
    
         <button type="button" class="btn btn-md btn-primary" data-rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. Right?">
			Popover with title
		</button>
		
		<button type="button" class="btn btn-md btn-primary" data-rel="popover" data-toggle="popover" data-placement="left" 
		data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  			Popover on left
		</button>

		<button type="button" class="btn btn-md btn-primary" data-rel="popover" data-toggle="popover" data-placement="top" 
		data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
			Popover on top
		</button>

		<button type="button" class="btn btn-md btn-primary" data-rel="popover" data-toggle="popover" data-placement="bottom" 
		data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  			Popover on bottom
		</button>
	</div>

	
<!-- Collapse ================================================== -->

       <div class="col-md-6">
          <h2>Accordion</h2>
			
			<div class="panel-group" id="accordion">
			<div class="panel">
				<div class="panel-heading">
					<h4 class="panel-title">
						<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
						Collapsible Group Item #1
						</a>
					</h4>
				</div>
				
				<div id="collapseOne" class="panel-collapse collapse in">
					<div class="panel-body">
					<img src="img/large/screen3.jpg" alt="" />
					<p class="pad15">
						Rebum sanctus gubergren ei mea, usu repudiare adolescens rationibus at, eum ea dicant malorum deseruisse. Quot pertinax sensibus id per, 
						usu vide dolorem ea. Invidunt incorrupte mei ea, duo ei viderer mentitum explicari. Sed dolorum mediocritatem ex. Ceteros fabellas verterem ut has, ne facilis.
					</p>
					
					<h1><span>CREATE <i class="fa fa-arrow-right hue"></i> DESIGN <i class="fa fa-arrow-right hue"></i>  CODE</span></h1>
					<p>
						Ex sit diam veniam veritus. Nec ex quis homero. Porro audiam recusabo ut sed, qui ornatus menandri ea, brute aperiam insolens his in.
						 Vel te augue ponderum singulis, ei justo doctus.
					</p>
				</div>
			</div>
		</div>
		
    <div class="panel panel-default">
        <div class="panel-heading">
             <h4 class="panel-title">
				<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
					Collapsible Group Item #2
				</a>
			</h4>
		</div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
				<p>
					Lorem ipsum dolor sit amet, vix invidunt neglegentur no, in pri evertitur consequuntur. Minim evertitur scripserit ad qui, 
					no diam error meliore quo. No mei ferri adhuc scribentur, an eius vitae ubique eos.
				</p>
				
				<h6><span class="colour">Certain things to consider are:</span></h6>
				<ul class="fa-ul">
					<li><i class="fa-li fa fa-star hue"></i><span>Purpose</span><br>
						Porro audiam recusabo ut sed, qui ornatus menandri ea, brute aperiam insolens</li>
					<li><i class="fa-li fa fa-star hue"></i><span>Goals</span>
						<br/>Vel te augue ponderum singulis, ei justo doctus sed?</li>
					<li><i class="fa-li fa fa-star hue"></i><span>Target Audience</span>
						<br/>Quot pertinax sensibus id per, usu vide dolorem ea. Invidunt incorrupte mei ea, duo ei viderer mentitum explicari.</li>
				</ul>
			</div>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading">
             <h4 class="panel-title">
				<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
					Collapsible Group Item #3
				</a>
			</h4>
		</div>
        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">
				<p>An mea vidit definiebas. No sea quaestio abhorreant, ne sit offendit urbanitas interpretaris. Habeo atqui docendi quo ne, clita labore laoreet eam no.</p>
					<ul class="media-list">
						<li class="media">
							<img class=" pull-left" src="img/small/pop_post1.jpg" alt="" />
							<div class="media-body">
							Ex sit diam veniam veritus. Nec ex quis homero. Porro audiam recusabo ut sed, qui ornatus menandri ea, brute aperiam insolens his in. 
							Vel te augue ponderum singulis, ei justo doctus sed.</div>
						</li>
									
						<li class="media">
							<img class="pull-left" src="img/small/pop_post2.jpg" alt="" />
							<div class="media-body">
							Ex sit diam veniam veritus. Nec ex quis homero. Porro audiam recusabo ut sed, qui ornatus menandri ea, brute aperiam insolens his in.
							Vel te augue ponderum singulis, ei justo doctus sed.</div>
						</li>
									
						<li class="media">
							<img class=" pull-left" src="img/small/pop_post3.jpg" alt="" />
							<div class="media-body">
							Ex sit diam veniam veritus. Nec ex quis homero. Porro audiam recusabo ut sed, qui ornatus menandri ea, brute aperiam insolens his in. 
							Vel te augue ponderum singulis, ei justo doctus sed.</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
			</div>
				</div>
					</div>
				</div>
			</div>
		<div class="pad45 hidden-md hidden-lg"></div>
	<!--//page-->
    
    <!--footer-->
		<div id="footer2">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
				<div class="copyright">
							FLATI
							&copy;
							<script type="text/javascript">
							//<![CDATA[
								var d = new Date()
								document.write(d.getFullYear())
								//]]>
								</script>
							 - All Rights Reserved :
							Template by <a href="http://spiralpixel.com">Spiral Pixel</a>
						</div>
						</div>
					</div>
				</div>
					</div>
					<!-- up to top -->
				<a href="#"><i class="go-top fa fa-angle-double-up"></i></a>
				<!--//end-->
				
<!-- scripts -->
<script src="js/jquery.js"></script>	
<script src="js/bootstrap.min.js"></script>
<script src="js/retina.js"></script>

<!-- POPOVER -->
<script type="text/javascript">
//<![CDATA[
	$("[data-rel=popover]").hover(function(){
	$(this).popover('toggle');
	});
	//]]>
</script>

<script type="text/javascript" src="js/scripts.js"></script>
</body>
</html>
